<template>
<block>
<view class="cu-bar search bg-white">
  <view class="search-form round">
    <text class="cuIcon-search"></text>
    <navigator class="response" hover-class="none" url="/pages/base/search/index">
      <input type="text" placeholder="请输入商品名"/>
    </navigator>
  </view>
</view>
	<view class="category-container-001">
			<view class="asidecategory">
				<view class="itemcategory activecategory">狗粮专区</view>
				<view class="itemcategory">猫粮专区</view>
				<view class="itemcategory">保健品专区</view>
				<view class="itemcategory">清洁专区</view>
				<view class="itemcategory">驱虫专区</view>
				<view class="itemcategory">零食专区</view>
				<view class="itemcategory">罐头专区</view>
				<view class="itemcategory">用品专区</view>
				<view class="itemcategory">玩具专区</view>
				<view class="itemcategory">猫砂专区</view>
			</view>
			<view class="goods-wrappercategory">
				<view class="toolscategory">
					<view class="licategory activecategory">综合</view>
					<view class="licategory">销售</view>
					<view class="licategory">价格</view>
				</view>
				<view class="goods-containercategory">
					<view class="goods-listcategory">
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
						<a @click="click" class="itemcategory">
							<view class="imagecategory"></view>
							<view class="namecategory">特价耐吉斯新西兰版猫粮5.45KG</view>
							<view class="othercategory">
								<view class="pricecategory">300</view>
								<view class="btncategory"></view>
							</view>
						</a>
					</view>
				</view>
			</view>
		</view>
</block>
</template>

<script>
const app = getApp();
export default {
	data() {
        return {
		  config: app.globalData.config,
		  TabCur: 0,
		  MainCur: 0,
		  VerticalNavTop: 0,
		  goodsCategory: [],
		  load: true
		};
    },
	onLoad() {
	  app.globalData.initPage().then(res => {
		this.goodsCategoryGet();
	  });
	}, 
	onShow() {
	  //更新tabbar购物车数量
	  uni.setTabBarBadge({
		index: 2,
		text: app.globalData.shoppingCartCount + ''
	  });
	}, 
	methods: {
		click(e){
			uni.navigateTo({
				// url: '../goods/goods-detail/index?id=1442505794278191105',
				url: '../goods-detail/index?id=1442505794278191105'
			})
		},
		goodsCategoryGet() {
		  app.globalData.api.goodsCategoryGet().then(res => {
			let goodsCategory = res.data;
			this.setData({
			  goodsCategory: goodsCategory
			});
		  });
		},

		tabSelect(e) {
		  this.setData({
			TabCur: e.currentTarget.dataset.id,
			MainCur: e.currentTarget.dataset.id,
			VerticalNavTop: (e.currentTarget.dataset.id - 1) * 50
		  });
		},

		VerticalMain(e) {
		  let that = this;
		  let list = this.goodsCategory;
		  let tabHeight = 0;

		  if (this.load) {
			for (let i = 0; i < list.length; i++) {
			  let view = uni.createSelectorQuery().select("#main-" + i);
			  view.fields({
				size: true
			  }, data => {
				list[i].top = tabHeight;
				tabHeight = tabHeight + data.height;
				list[i].bottom = tabHeight;
			  }).exec();
			}

			that.setData({
			  load: false,
			  goodsCategory: list
			});
		  }

		  let scrollTop = e.detail.scrollTop + 20;

		  for (let i = 0; i < list.length; i++) {
			if (scrollTop > list[i].top && scrollTop < list[i].bottom) {
			  that.setData({
				VerticalNavTop: (i - 1) * 50,
				TabCur: i
			  });
			  return false;
			}
		  }
		}
	}};
</script>
<style >
.VerticalNav.nav {
  width: 220rpx;
  white-space: initial;
}
.VerticalNav.nav .cu-item {
  font-size:14px;
  font-weight:300;
  color: #333333;
  width: 100%;
  text-align: center;
  background-color: #f1f1f1;
  margin: 0;
  border: none;
  height: 50px;
  position: relative;
}
.VerticalNav.nav .cu-item.cur {
  font-size:15px;
  font-weight:500;
  border-radius: 10rpx 0 0 10rpx;
  background-color: #fff;
}
.VerticalNav.nav .cu-item.cur::after {
  content: "";
  position: absolute;
  background-color: currentColor;
  top: 0;
  right: 0rpx;
  bottom: 0;
  margin: auto;
}
.VerticalBox{
  display: flex;
}
.VerticalMain{
  background-color: #fff;
}
.img-banner{
  width: 94%;
  height: 148rpx;
	margin: auto;
}
.cate-list{
  display:flex;
  flex-wrap:wrap;
  width: 100%;
  }
.cate-title{
  width:100%;
  font-size:15px;
  font-weight:bold;
  padding-left:10rpx;
  }
.cate{
  width:150rpx;
  font-size:14px;
  margin:15rpx;
  text-align:center;
  }
.cate-img{
  width:140rpx;
  height:140rpx;
  }
.cate-type{
  font-size: 14px;
  color: #000000
  }
</style>